<template>
<div class="upload-file-list">
    <el-image v-if="images.length" class="image" fit="cover" :src="images[0].url" :preview-src-list="images | toImages"></el-image>
    <div class="file-list" v-if="files.length">
        <div class="file-item" v-for="(item, key) in files" :key="key">
            <a :href="item.url" target="_blank">{{item.name}}</a>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: "upload-file-list",
    props: {
        fileList: {
            type: Array,
            default: () => ([]),
        },
    },
    filters: {
        toImages(images) {
            return images.map(item => item.url);
        },
    },
    computed: {
        images() {
            return this.fileList.filter(item => item.url && /\.(jpeg|jpg|png|gif)$/i.test(new URL(item.url).pathname));
        },
        files() {
            let files = this.fileList.filter(item => item.url && !/\.(jpeg|jpg|png|gif)$/i.test(new URL(item.url).pathname));
            
            return files;
        },
    }
};
</script>

<style lang="scss" scoped>
.image {
    width: 80px;
    height: 80px;
}
.file-list {
    display: flex;
    flex-wrap: wrap;

    .file-item {
        margin-right: 10px;
        margin-bottom: 10px;
    }
}
</style>
